<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .box{
          position: absolute;
          left: 100px;
          top: 100px;
          width: 500px;
          height: 500px;
          border: 1px solid black;
        }
        .ban{
            position: absolute;
            bottom: 0;
            left: 200px;
            width: 100px;
            height: 20px;
            text-align: center;
            background-color: cornflowerblue;
        }
        .ball{
            position: absolute;
            left: 250px;
            top:470px;
            width: 10px;
            height: 10px;
            background-color: red;
            border-radius: 50%;
        }
        .topZhuan{
            position: absolute;
            top: 0;
            left: 0;
        }
        .start{
            margin: 200px 150px;
            width: 200px;
            height: 50px;
            text-align: center;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="topZhuan"></div>
        <div class="ball"></div>
        <div class="ban">底盘</div>
        <button class="start">开始游戏</button>
    </div>
    <script>
        let ban=get('.ban')
        tz(ban)
        let ball=get('.ball')
        let box=get('.box')
        let topZhuan=get('.topZhuan')
        creatZhuang(30)
        let start=get('.start')
 
        start.addEventListener('click',()=>{
           //开始游戏
           move(ball) 
           start.style.display='none'
        })
        //获取节点
        function get(node){
            return document.querySelector(node)
        }
        //地板拖拽
        function tz(node){
           node.onmousedown=function (e){
               let offsetX=e.clientX-node.offsetLeft
               document.onmousemove=function(en){
                let e=en||window.event
                node.style.left=e.clientX
                if(e.clientX-offsetX<=0){
                    node.style.left=0+'px'
                }else if(e.clientX-offsetX>=400){
                    node.style.left=400+'px'
                }else{
                    node.style.left=e.clientX-offsetX+'px'
                }
               }
           }
           document.onmouseup=function(){
               document.onmousemove=null
           }
        }
        //小球移动
        function move(node){
            let speedx=parseInt(Math.random()*3+5)
            let speedy=parseInt(Math.random()*3+5)
            let timer=setInterval(()=>{

                if(node.offsetLeft<=0||node.offsetLeft>=490)
                   {speedx=speedx*(-1)}
                if(node.offsetTop<=0){
                    speedy=speedy*(-1)
                }
                if(node.offsetTop>490){
                    //游戏结束
                    clearInterval(timer)
                    alert('GAME OVER')
                    window.location.reload()
                }
                if(pen(ball,ban)){
                    //小球与板碰撞
                    speedy=speedy*(-1)
                }
                node.style.left=node.offsetLeft+speedx+'px'
                node.style.top=node.offsetTop+speedy+'px'
           
                for(let j=0;j<topZhuan.children.length;j++){
                   if(pen(ball,topZhuan.children[j])){
                    //小球与砖碰撞
                     topZhuan.children[j].style.display='none'
                     speedy=speedy*(-1)
                }
            }
            },50)

        }
        //创建砖块
        function creatZhuang(num){
          for(let i=0;i<num;i++){
            let zhuan=document.createElement('div')
             zhuan.style.backgroundColor=getColor()
             zhuan.style.width='100px'
             zhuan.style.height='20px'
             zhuan.style.left=(i%5)*100+'px'
             zhuan.style.top=(Math.floor(i/5)*20)+'px'
             zhuan.style.border='1px solid black'
             zhuan.style.position='absolute'
             topZhuan.appendChild(zhuan)
          }
        }
        //判断是否碰撞
        function pen(ball,zhuan){
            let ispend=true
            if(ball.offsetTop<zhuan.offsetTop||ball.offsetTop>(zhuan.offsetTop+parseInt(zhuan.style.height) )
              ||ball.offsetLeft<zhuan.offsetLeft||ball.offsetLeft>(zhuan.offsetLeft+parseInt(zhuan.style.width))){
                ispend=false
            }else{
                ispend=true
            }
            return ispend
        }
        //获取颜色
        function getColor(){
            let r=Math.round(Math.random()*255) 
            let g=Math.round(Math.random()*255) 
            let b=Math.round(Math.random()*255)
            let opstily=Math.random()
            let color=`rgb(${r},${g},${b},${opstily})`
            return color
        }
    </script>
</body>
</html>